<template>
	<view>
		<view>
			<u-search 
			    v-model="searchKey" 
				placeholder="搜索" 
				shape="square" 
				height="70" 
				action-text="取消" 
				:action-style="{fontWeight:'bold'}" 
				@change="onSearchChange"
				@custom="onCustom"
			>
			</u-search>
		</view>
		<view>
			<u-tabs 
				:list="dataList" 
				:is-scroll="false" 
				:current="current" 
				@change="onTabschange"  
				active-color="#2979ff" 
			></u-tabs>
		</view>
		<!-- 搜索结果显示区 -->
		<view class="content__warp">
			<view class="content__ul">
				<template v-if="renderData.length > 0">
					<view class="content__item" v-for="item in renderData" :key="item[nodeKey]">
						<!-- 复选框 -->
						<checkbox @click="handleItemClick(item)" :checked="isChecked(item)"></checkbox>
						<!-- 图标 -->
						<image
							v-if="isShowIcon"
							@click="handleItemClick(item)"
							class="avatar"
							:style="{
								visibility: item[icon] || defaultIcon ? 'visible' : 'hidden'
							}"
							src="item[icon] || defaultIcon"
						></image>
						<!--  名称显示 -->
						<text class="content__item-text" @click="handleItemClick(item)">
							{{ item[label] }}
						</text>
						<!-- 下级按钮 -->
						<text v-if="item.hasChildren" @click="handleItemChildClick(item)" class="content__item-child">></text>
					</view>
				</template>
				<template v-else>
					<view class="empty" v-if="showEmptyTip">
						找不到搜索结果
					</view>
				</template>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'JsOrgSearch',
	// 注入父组件的数据或方法
	inject: [
		"p_isChecked"
	],
	props: {
		label: {
			type: String,
			default: 'name'
		},
		nodeKey: {
			type: String,
			default: 'id'
		},
		nodeType: {
			type: String,
			default: 'type'
		},
		defaultIcon: {
			type: String,
			default: ''
		},
		isShowIcon: {
			type: Boolean,
			default: false
		},
		icon: {
			type: String,
			default: 'avatar'
		},
		tabDataList: {
			type: Array,
			default: () => [
				{
					name: '部门',
					type: 'org',
					dataSource: {
						requestUrl: '/api/blade-system/dept/lazy-list',
						requestParams: {
							deptName: '$searchKey$'
						},
						responseDataKey: 'data',
						responseAdapter: {
							'$nodeKey$': 'id',
							'$label$': 'deptName',
							'$nodeType$': '1',
							hasChildren: true
						}
					}
				},
				{
					name: '成员',
					type: 'user',
					dataSource: {
						requestUrl: '/api/blade-system/user/choose-user-page',
						requestParams: {
							realName: '$searchKey$',
							current: 1,
							size: 500,
							deptType: '',
							deptId: '$deptId$'
						},
						responseDataKey: 'data.records',
						responseAdapter: {
							'$nodeKey$': 'id',
							'$label$': 'realName',
							'$nodeType$': '2'
						}
					}
				},
				{
					name: '标签',
					type: 'tag',
					dataSource: {
						requestUrl: '/api/blade-wechat/wechatTag/page',
						requestParams: {
							tagName: '$searchKey$',
							current: 1,
							size: 500
						},
						responseDataKey: 'data.records',
						responseAdapter: {
							'$nodeKey$': 'id',
							'$label$': 'tagName',
							'$nodeType$': '3'
						}
					}
				}
			]
		}
	},
	data() {
		return {
			dataList: this.tabDataList,
			current: 0,
			// 用来渲染的数据源
			renderData: [],
			searchKey: '',
			showEmptyTip: false
		};
	},
	methods: {
		onSearchChange() {
			if(!this.searchKey) {
				return
			}
			let vm = this;
			let { requestUrl,requestParams,responseDataKey,responseAdapter } = this.dataList[this.current].dataSource;
			let parsedRequestParams = this.doParseRequestParams(requestParams);
			this.$u.api.getUrlData(requestUrl,parsedRequestParams).then(res => {
				if (res.success) {
					let records = null;
					let separateKeys = responseDataKey.split('.');
					separateKeys.forEach(key => {
						if(!records) {
							records =  res[key];
						}else {
							records = records[key]
						}
					});
					// 转义适配renderData的数据
					vm.renderData = records.map(record => {
						let parsedRecord = vm.doParseRecord(responseAdapter,record);
						return parsedRecord;
					});
				}
			});
		},
		/**
		 * 解析请求入参
		 * @param {Object} requestParams
		 */
		doParseRequestParams(requestParams) {
			let parsedRequestParams = this.$u.deepClone(requestParams);
			let vm = this;
			Object.keys(parsedRequestParams).forEach(key => {
				let val = parsedRequestParams[key];
				if(val === '$searchKey$') {
					parsedRequestParams[key] = vm.searchKey;
				}else if (val === '$deptId$') {
					parsedRequestParams[key] = vm.vuex_deptId;
				}
			})
			return parsedRequestParams;
		},
		/**
		 * 解析返回结果
		 * @param {Object} responseAdapter
		 * @param {Object} recordData
		 */
		doParseRecord(responseAdapter,recordData) {
			let vm = this;
			let parsedRecord = this.$u.deepClone(responseAdapter);
			Object.keys(parsedRecord).forEach(key => {
				let val = parsedRecord[key];
				if(key === '$nodeKey$') {
					delete parsedRecord[key];
					parsedRecord[vm.nodeKey] = recordData[val];
				}else if(key === '$label$') {
					delete parsedRecord[key];
					parsedRecord[vm.label] = recordData[val];
				}else if(key === '$nodeType$') {
					delete parsedRecord[key];
					parsedRecord[vm.nodeType] = val;
				}
			});
			return parsedRecord;
		},
		onCustom(value) {
			this.$emit('on-org-search-close');
		},
		onTabschange(index) {
			this.current = index;
			this.onSearchChange();
		},
		isChecked(data) {
			return this.p_isChecked(data);
		},
		/**
		 * 点击选项
		 * @param {Object} row
		 */
		handleItemClick(row) {
			this.$emit('on-org-search-select', row);
		},
		/**
		 * 点击下级按钮
		 * @param {Object} row
		 */
		handleItemChildClick(row) {
			this.$emit('on-org-search-expand', row);
		}
	}
};
</script>
<style scoped>
.content__warp {
	flex: 1;
	overflow-y: auto;
	border-top: 2rpx solid #eee;
}

.content__warp .content__ul {
	height: calc(100vh - 17rem);
	overflow: auto;
}

.content__warp .content__item {
	border-bottom: 2rpx solid #eee;
	height: 76rpx;
	margin: 0 20rpx;
	display: flex;
	align-items: center;
	padding: 16rpx 0;
	box-sizing: border-box;
}

.content__warp .content__item .content__item-text {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.content__warp .content__item:last-child {
	border: none;
}

.content__warp .content__item:first-child {
	border-top: none;
}

.content__warp .content__item .avatar {
	width: 50rpx;
	height: 50rpx;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 10rpx;
}

.content__warp .content__item .content__item-child {
	padding: 0 16rpx;
	width: max-content;
	color: #409eff;
	border-left: 2rpx solid #eee;
	box-sizing: border-box;
	cursor: pointer;
	font-weight: 600;
}

.content__warp .empty {
	padding: 40rpx 0;
	color: #999;
	text-align: center;
	font-size: 36rpx;
}
</style>